<template>
    <div class="pay">
        <el-container>
            <el-header>门&nbsp;&nbsp;诊&nbsp;&nbsp;收&nbsp;&nbsp;费<el-divider></el-divider>
            </el-header>
            <el-container>
                <el-aside width="400px">

                    <el-form ref="form" :model="form1" label-width="80px" label-position='left' id="form1">
                        <el-form-item label="处方来源">
                            <el-radio-group v-model="form1.resource">
                                <el-radio label="联机处方"></el-radio>
                                <el-radio label="手工处方"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>

                    <el-form ref="form" :model="form" label-width="80px" label-position='left' id="form1">

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="药方编号" size="mini">
                                    <el-input v-model="form.prescriptionId" @blur="getMsgOfOneByPrescriptionId">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="项目编号" size="mini">
                                    <el-input v-model="form.checkId" @blur="getMsgOfOneByCheckId"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="姓名" size="mini">
                            <el-input v-model="form.patientName"></el-input>
                        </el-form-item>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="性别" size="mini">
                                    <el-select v-model="form.patientGender" placeholder="">
                                        <el-option label="男" value="man"></el-option>
                                        <el-option label="女" value="woman"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="费类" size="mini">
                                    <el-select v-model="form.way" placeholder="">
                                        <el-option label="医保报销" value="byCard"></el-option>
                                        <el-option label="自费医疗" value="byMyself"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="处方时间" size="mini">
                            <el-input v-model="form.rwaAddTime" :disabled="true"></el-input>
                        </el-form-item>
                    </el-form>

                    <el-divider></el-divider>

                    <div>
                        <el-radio v-model="radio" label="1" border size="medium" @change="getAllPayMassage">处方开药
                        </el-radio>
                        <el-radio v-model="radio" label="2" border size="medium" @change="getAllPayMassage">项目检查
                        </el-radio>
                    </div>
                    <br>
                    <el-table :data="payMsg" height="250" border style="width: 97%" max-height="250">
                        <el-table-column label="缴费信息">
                            <el-table-column fixed="right" label="操作" width="58">
                                <template slot-scope="scope">
                                    <el-button type="info" size="mini" icon="el-icon-notebook-2" circle
                                        @click="checkeIt(scope.row)"></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prescriptionId" label="药方编号" width="107"></el-table-column>
                            <el-table-column prop="checkId" label="项目编号" width="107"></el-table-column>
                            <el-table-column prop="patientName" label="姓名" width="115"></el-table-column>
                            <!-- <el-table-column prop="diagnose" label="处方概况" width="96"></el-table-column> -->
                        </el-table-column>
                    </el-table>
                    <!-- 缴费人员分页 -->
                    <el-pagination background layout="prev, pager, next" :total="pageData.total"
                        :page-size="pageData.size" :current-page="pageData.current" @current-change="handlePagePay">
                    </el-pagination>

                    <el-divider></el-divider>

                    <el-button type="primary" @click="medicinePay" plain>药方缴费</el-button>
                    <el-button type="primary" @click="checkPay" plain>项目缴费</el-button>

                    <el-button type="primary" @click="print">打印票据</el-button>
                    <el-divider></el-divider>
                    <iframe id="iframe1" style="display: none"></iframe>
                </el-aside>
                <br>

                <el-main>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini"
                        label-position='left' id="form2">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="总金额">
                                    <el-input v-model="formInline.account" placeholder="" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="挂账">
                                    <el-input placeholder="暂不支持" :disabled="true">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="转账">
                                    <el-input placeholder="暂不支持" :disabled="true">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="磁卡">
                                    <el-input placeholder="暂不支持" :disabled="true">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div class="title">
                        <!-- <el-tooltip class="item"   placement="top-start"> -->
                        <span>药方详情</span>
                        <!-- </el-tooltip> -->
                    </div>
                    <div id="dayin" ref="dayin">
                        <!--startprint-->
                        <el-table :data="prescriptionData" style="width: 100%" height="250px">
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column prop="productName" label="药品名" width="180">
                            </el-table-column>
                            <el-table-column prop="medicineNum" label="数量" width="180">
                            </el-table-column>
                            <el-table-column prop="productRetailPrice" label="金额">
                            </el-table-column>
                        </el-table>

                        <br>
                        <el-divider></el-divider>
                        <div class="title">
                            <!-- <el-tooltip class="item" effect="dark" content="" placement="top-start"> -->
                            <span>项目详情</span>
                            <!-- </el-tooltip> -->
                        </div>
                        <el-table :data="checkData" style="width: 100%" height="250px">
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column prop="itemName" label="项目名" width="180">
                            </el-table-column>
                            <el-table-column prop="num" label="项目次数" width="180">
                            </el-table-column>
                            <el-table-column prop="checkPrice" label="金额">
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--endprint-->
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'Pay',
        data() {
            return {
                radio: '1',
                pageData: {
                    total: 10,
                    size: 3,
                    current: 1
                },
                form1: {
                    resource: '手工处方',
                },
                form: {

                    prescriptionId: '',
                    checkId: '',
                    patientName: '',
                    patientGender: '',
                    way: '自费医疗',
                    rwaAddTime: '',

                },
                formInline: {
                    account: '0',

                },
                payMsg: [{}],
                prescriptionData: [{

                }],
                checkData: [{
                    itemName: '',
                    num: '1',
                    checkPrice: ''
                }]
            }
        },
        methods: {
            getMsgOfOneByPrescriptionId() {
                this.checkData = [{}]
                this.$http.get("http://localhost:8088/getMsgOfOne", {
                        params: {
                            prescriptionId: this.form.prescriptionId
                        }
                    })
                    .then(res => {
                        // console.log(res)
                        if (res.data.success) {
                            this.form = res.data.data
                            this.showMedicineMsgByPrescriptionId();
                        } else {
                            this.$message({
                                message: '处方号不存在',
                            });
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })

            },
            showMedicineMsgByPrescriptionId() {
                this.$http.get("http://localhost:8088/showMedicineMsgByPrescriptionId", {
                        params: {
                            prescriptionId: this.form.prescriptionId
                        }
                    })
                    .then(res => {
                        console.log(res)
                        this.prescriptionData = res.data.data
                        this.formInline.account = res.data.data[0].prescriptionPrice
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            getMsgOfOneByCheckId() {
                this.prescriptionData = [{}]
                this.$http.get("http://localhost:8088/getMsgOfOneByCheckId", {
                        params: {
                            checkId: this.form.checkId
                        }
                    })
                    .then(res => {
                        console.log(res)
                        if (res.data.success) {
                            this.form = res.data.data
                            this.showCheckMsgByCheckId();
                        } else {
                            this.$message({
                                message: '项目号不存在',
                            });
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })


            },
            showCheckMsgByCheckId() {
                this.$http.get("http://localhost:8088/showCheckMsgByCheckId", {
                        params: {
                            checkId: this.form.checkId
                        }
                    })
                    .then(res => {
                        // console.log("==============")
                        // console.log(res)
                        this.checkData = res.data.data
                        this.formInline.account = res.data.data[0].totalPrice
                    })
                    .catch(err => {
                        console.error(err);
                    })

            },
            getAllPayMassage() {
                // console.log(this.radio)
                var now = new Date();
                var year = now.getFullYear(); //获取完整的年份
                var month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
                var day = now.getDate() - 1;
                var date2 = year + '-' + month + '-' + now.getDate();
                var date1 = year + '-' + month + '-' + day;
                this.num++;
                if (this.radio == 2) {
                    console.log("=====================")
                    this.$http.get("http://localhost:8088/getAllCheckPayMassage", {
                            params: {
                                startTime: date1,
                                stopTime: date2,
                                current: this.pageData.current
                            }
                        })
                        .then(res => {
                            console.log(res)
                            Object.assign(this.pageData, res.data);
                            this.pageData.total = res.data.data.total
                            this.payMsg = res.data.data.records
                            for (let i = 0; i < this.checkData.length; i++) {
                                this.checkData[i].num = 1
                            }
                            // console.log(this.payMsg)
                        })
                        .catch(err => {
                            console.error(err);
                        })
                } else {
                    this.checkData = [{}]
                    this.$http.get("http://localhost:8088/getAllPrescriptionPayMassage", {
                            params: {
                                startTime: date1,
                                stopTime: date2,
                                current: this.pageData.current
                            }
                        })
                        .then(res => {
                            console.log(res)
                            Object.assign(this.pageData, res.data);
                            this.pageData.total = res.data.data.total
                            this.payMsg = res.data.data.records
                        })
                        .catch(err => {
                            console.error(err);
                        })
                }
            },
            onSubmit() {

            },
            handlePagePay(data) {
                this.pageData.current = data;
                this.getAllPayMassage();
            },
            // 药方缴费
            medicinePay() {
                // console.log(this.form.prescriptionId)
                this.$http.post("http://localhost:8088/medicinePay", {
                        prescriptionId: this.form.prescriptionId
                    })
                    .then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: '药方缴费成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '药方缴费失败',
                                type: 'fail'
                            });
                        }
                        this.getAllPayMassage();
                    })
                    .catch(err => {
                        console.error(err);
                    });

            },
            //项目缴费
            checkPay() {
                this.$http.post("http://localhost:8088/checkPay", {
                        checkId: this.form.checkId
                    })
                    .then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: '项目缴费成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '项目缴费失败',
                                type: 'fail'
                            });
                        }
                        this.getAllPayMassage();
                    })
                    .catch(err => {
                        console.error(err);
                    });

            },
            print() {
                var iframe = null;
                iframe = document.getElementById("iframe1")
                var iwindow = null;
                var iwindow = iframe.contentWindow; //获取iframe的window对象

                var text1 = '处方单:';
                for (let i = 0; i < this.prescriptionData.length; i++) {
                    text1 += "药品名：" + this.prescriptionData[i].productName + "数量：" + this
                        .prescriptionData[i].medicineNum + "单价：" + this
                        .prescriptionData[i].productRetailPrice + "\r\n"
                };
                text1 = text1 + "总价：" + this.prescriptionData[0].prescriptionPrice

                var text2 = '项目单:';
                for (let i = 0; i < this.checkData.length; i++) {
                    text2 += "项目名：" + this.checkData[i].itemName + "数量：" + this
                        .checkData[i].num + "单价：" + this
                        .checkData[i].checkPrice + "\r\n"
                };
                text2 = text2 + "总价：" + this.checkData[0].totalPrice

                iwindow.document.close();
                if (this.radio == 1) {
                    iwindow.document.write(text1);
                } else {
                    iwindow.document.write(text2);
                }
                iwindow.print(); //调用浏览器的打印功能打印指定区域
            },
        },
        computed: {

        },
        mounted() {
            this.getAllPayMassage();
        }
    }
</script>

<style>
    .pay .el-header {
        font-size: 35px;
        color: #409EFF;
        text-align: center;
        line-height: 20px
    }

    #form1 {
        width: 390px;
    }

    #form2 .el-input {
        width: 80px;
    }

    .title {
        color: dodgerblue;
    }
</style>